<template>
  <div>
    <Row type="flex" class="common_window_top" align="middle" justify="start">
      <Col span="4">
      <div>
          <span class="title">
            <Icon type="ios-contacts" size="45"/>角色列表</span>
      </div>
      </Col>
      <Col span="20">
        <div style="float: right">
          <Form ref="" label-position="right" :label-width="65" inline>
            <FormItem label="角色名称:" >
              <Input type="text" placeholder="角色名称" v-model="parameters.roleName"/>
            </FormItem>
            <FormItem label="角色类型:">
              <Select v-model="parameters.roleType" placeholder="角色类型" clearable>
                <Option v-for="item in dictArray.roleType" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem :label-width="0">
              <Button type="primary" @click="findButton">查询</Button>
            </FormItem>
            <FormItem :label-width="0" style="margin-left: 10px;">
              <Button type="success" @click="addRoleButton">新增</Button>
            </FormItem>
          </Form>
        </div>
      </Col>
    </Row>
    <br>
    <Row class="common_window_down">
      <Col span="24">
        <Table border :columns="roleColumn" :data="roleList"></Table>
        <Page :current="parameters.current" :total="total" :page-size="parameters.size"  @on-change="changePageCurrent" @on-page-size-change="changePageSize" show-sizer show-elevator show-total></Page>
      </Col>
    </Row>

    <Modal v-model="addOrUpdateRole.isShow" :title="addOrUpdateRole.parameters.id ? '修改角色' : '新增角色'" :mask-closable="false">
      <Form ref="formValidate" label-position="right" :model="addOrUpdateRole.parameters" :rules="addOrUpdateRole.ruleValidate" :label-width="80" inline>
        <Row :gutter="3">
          <Col span="12">
          <FormItem label="角色名称:" prop="roleName">
            <Input v-model="addOrUpdateRole.parameters.roleName" type="text" placeholder="角色名称" />
          </FormItem>
          </Col>
          <Col span="12">
          <FormItem label="角色类型:" style="width: 94%" prop="roleType">
            <Select v-model="addOrUpdateRole.parameters.roleType"  placeholder="角色类型" >
              <Option v-for="(item,index) in dictArray.roleType" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          </Col>
        </Row>
        <Row :gutter="3">
          <Col span="12">
          <FormItem label="角色排序:" prop="sort">
            <InputNumber :max="100000" :min="1" :precision="0" v-model="addOrUpdateRole.parameters.sort"></InputNumber>
          </FormItem>
          </Col>
          <Col span="12">
          </Col>
        </Row>
        <Row :gutter="3">
          <Col span="24">
          <FormItem label="描述:" style="width: 97%" prop="remarks">
            <Input v-model="addOrUpdateRole.parameters.remarks" type="textarea" :rows="3" placeholder="描述" />
          </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="primary" size="large" :loading="addOrUpdateRole.loading" @click="sendRole">提交</Button>
      </div>
    </Modal>

    <Modal v-model="authRoleMenu.isShow" title="选择菜单" :mask-closable="false">
      <Tree ref="menusTree" :data="authRoleMenu.menuTrees" show-checkbox empty-text="该系统类型无菜单数据！">
      </Tree>
      <div slot="footer">
        <Button type="primary" size="large" :loading="authRoleMenu.loading" @click="sendMenuAllocationRole">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import {pageRoleList,addRole,updateRole,deleteRole,authorizationUserMenuPermissions} from "../../../api/sys/system/sysRole";
  import {listMenuTreeByRoleId} from "../../../api/sys/system/sysMenu";

  import {mapState} from "vuex";
  export default {
    name : 'sysSystemRole',
    computed : {
      ...mapState(['dictObject','dictArray'])
    },
    data () {
      return {
        roleList : [],
        roleColumn : [
          {title : '角色名称',key : 'roleName',align : 'center',tooltip : true},
          {title : '角色类型',key : 'roleType',align : 'center',tooltip : true,render : (h,parame)=>{return h("span",this.dictObject.roleType[parame.row.roleType])}},
          {title : '角色排序',key : 'sort',align : 'center',tooltip : true},
          {title : '修改时间',key : 'updatedTime',align : 'center',tooltip : true},
          {title : '操作',align : 'center',render : (h,parame)=>{
              var buttons = [];
              buttons.push(h('Button',{
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on : {
                  click : ()=>{
                    this.authRoleMenu.parameters.id = parame.row.id;
                    this.authRoleMenu.isShow = true;
                    this.findMenuTrees();
                  }
                }
              },'设置菜单'));
              buttons.push(h('Button',{
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                nativeOn : {
                  click : ()=>{
                    this.addOrUpdateRole.parameters.id = parame.row.id;
                    this.addOrUpdateRole.parameters.roleName = parame.row.roleName;
                    this.addOrUpdateRole.parameters.roleType = parame.row.roleType;
                    this.addOrUpdateRole.parameters.sort = parame.row.sort;
                    this.addOrUpdateRole.parameters.remarks = parame.row.remarks;
                    this.addOrUpdateRole.isShow = true;
                  }
                }
              },'修改'));
              buttons.push(h('Button',{
                props: {
                  type: 'error',
                  size: 'small'
                },
                on : {
                  click : ()=>{
                    this.deleteRole(parame.row.id);
                  }
                }
              },'删除'));
              return h('div',{},buttons)
            }},
        ],
        total : 0,
        parameters : {
          current : 1,
          size : 10,
          roleName : null,
          roleType : null,
        },
        addOrUpdateRole : {
          isShow : false,
          loading : false,
          parameters : {
            id : null,
            roleName : null,
            roleType : null,
            sort : 0,
            remarks : null,
          },
          ruleValidate : {
            roleName : { required: true, message: '必填！', trigger: 'change' },
            roleType : { required: true, message: '必填！', trigger: 'change' },
          }
        },
        authRoleMenu : {
          isShow : false,
          loading : false,
          menuTrees : [],
          parameters : {
            id : null,
            menuIds : '',
          },
        }
      }
    },
    mounted(){
      this.findButton();
    },
    methods : {
      findButton(){
        this.parameters.current = 1;
        this.findRoleList();
      },
      findRoleList(){
        pageRoleList(this.parameters).then(result =>{
          var data = result.data;
          if(data){
            this.parameters.current = data.current;
            this.total = data.total;
            this.roleList = data.records;
          }
        });
      },
      addRoleButton(){
        this.addOrUpdateRole.isShow = true;
        this.addOrUpdateRole.parameters.id = null;
        this.$refs['formValidate'].resetFields();
      },
      sendRole(){
        this.$refs['formValidate'].validate(valid=>{
          this.addOrUpdateRole.loading = true;
          if(valid){
            if(this.addOrUpdateRole.parameters.id){
              //修改角色
              updateRole(this.addOrUpdateRole.parameters.id,this.addOrUpdateRole.parameters).then(result=>{
                  this.addOrUpdateSuccess(false);
              },error=>{
                this.addOrUpdateRole.loading = false;
              });
            }else{
              //新增角色
              addRole(this.addOrUpdateRole.parameters).then(result=>{
                  this.addOrUpdateSuccess(true);
              },error=>{
                this.addOrUpdateRole.loading = false;
              });
            }
          }else{
            this.addOrUpdateRole.loading = false;
          }
        });
      },
      addOrUpdateSuccess(or){
        this.addOrUpdateRole.isShow = false;
        this.addOrUpdateRole.loading = false;
        this.$Message.success(or ? '新增成功！' : '修改成功！' );
        this.findRoleList();
      },
      deleteRole(id){
        deleteRole(id).then(result=>{
          this.$Message.success('删除成功！');
          this.findRoleList();
        });
      },
      findMenuTrees(){
        listMenuTreeByRoleId(this.authRoleMenu.parameters.id).then(result =>{
          this.authRoleMenu.menuTrees = result.data;
        });
      },
      sendMenuAllocationRole(){
        this.authRoleMenu.loading = true;
        this.authRoleMenu.parameters.menuIds = '';
        var checkNodes = this.$refs.menusTree.getCheckedNodes();
        var checkMenus = [];
        for(var i = 0;i<checkNodes.length;i++){
          checkMenus.push(checkNodes[i].id)
        }
        this.authRoleMenu.parameters.menuIds = checkMenus.join(',');
        authorizationUserMenuPermissions(this.authRoleMenu.parameters.id, this.authRoleMenu.parameters).then(result =>{
          this.$Message.success('设置成功！');
          this.authRoleMenu.isShow = false;
          this.authRoleMenu.loading = false;
        },error =>{
          this.authRoleMenu.loading = false;
        })
      },
      changePageCurrent(current){
        this.parameters.current = current;
        this.findRoleList();
      },
      changePageSize(size){
        this.parameters.size = size;
        this.findRoleList();
      }
    }
  }
</script>

<style scoped>
</style>
